import React, { Component } from 'react'
import { ListContainer } from './style'
import { withRouter } from 'react-router-dom'
@withRouter
export default class List extends Component {
    handleClick=(id)=>{
        this.props.history.push(`/detail/${id}`)
        // console.log(id)
    }
    render() {
        return (
            <ListContainer>
                <ul>
                    {
                        this.props.list.map(item => {
                            return (<li key={item.tid} onClick={()=>this.handleClick(item.tid)} >
                                <div className='top'>
                                    <div className="left">
                                        <h1>
                                           {item.title}
                                        </h1>
                                        <p>
                                          {item.introduction}
                                        </p>
                                    </div>
                                    <div className="right">
                                        <img src={item.picture} alt="" />
                                    </div>
                                </div>
                                <div className='bot'>
                                    <b>
                                        {item.formatTime}
                                    </b>
                                    <p>
                                        <i className='yo-ico'>&#xe633;</i>
                                        <span>
                                            {item.commentCount}
                                        </span>
                                        <i className='yo-ico'>&#xe7f5;</i>
                                        <span>
                                            {item.viewsCount}
                                        </span>
                                    </p>
                                </div>
                            </li>)
                        })
                    }
                </ul>
            </ListContainer>
        )
    }
}
